<template>
	<view class="detail">
		<view class="fixbg" :style="{'background-image':'url('+songDetail.al.picUrl+')'}"></view>
		<musichead :title="songDetail.name" color="white" :icon="true"></musichead>
		<view class="container" v-show="!isLoading">
			<scroll-view scroll-y="true">
				<!-- 播放部分 -->
				<view class="detail-play" @tap="handleToPlay">
					<image :src="songDetail.al.picUrl" :class="{ 'detail-play-run':isPlayRotate }"></image>
					<text class="iconfont" :class="iconPlay"></text>
					<view></view>
				</view>
				<!-- 歌词部分 -->
				<view  class="detail-lyric">
					<view class="detail-lyric-wrap" :style="{ transform : 'translateY('+ -(lyrinIndex - 1)*82 +'rpx)'}">
						<view class="detail-lyric-item" :class="{ active : index == lyrinIndex }" v-for="(item,index) in songLyric" :key="index">{{item.lyric}}</view>
					</view>
				</view>
				<!-- 相似歌曲 -->
				<view class="detail-like">
					<view class="detail-like-head">喜欢这首歌的人也听</view>
					<view class="detail-like-item" v-for="(item,index) in simiSong" :key="index" @tap="handleToSimi(item.id)">
						<view class="detail-like-img">
							<image :src="item.album.picUrl"></image>
						</view>
						<view class="detail-like-song">
							<view>{{ item.name }}</view>
							<view>
								<image v-if="item.privilege.flag > 60 && item.privilege.flag < 70 " src="../../static/dujia.png"></image>
								<image v-if="item.privilege.maxbr == 999000 " src="../../static/sq.png"></image>
								{{ item.artists[0].name }} - {{item.name}}
							</view>
						</view>
						<text class="iconfont iconbofang"></text>
					</view>
				</view>
				<!-- 评论部分 -->
				<view class="detail-comment">
					<view class="detail-comment-head">精彩评论</view>
					
					<view class="detail-comment-item" v-for="(item,index) in songComment" :key="index">
						<view class="detail-comment-img">
							<image :src="item.user.avatarUrl"></image>
						</view>
						<view class="detail-comment-content">
							<view class="detail-comment-title">
								<view class="detail-comment-name">
									<view>{{item.user.nickname}}</view>
									<view>{{ item.time | formatDate }}</view>
								</view>
								<view class="detail-comment-likes">
									{{ item.likedCount | formatCount }}<text class="iconfont iconlike"></text>
								</view>
							</view>
							<view class="detail-comment-text">{{item.content}}</view>
						</view>
					</view>
					
				</view>
							
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { songDetail,simiSong,commentMusic,lyric,songUrl } from '../../common/api';
	export default {
		data() {
			return {
				songDetail:{
					al:{
						picUrl:''
					}
				},
				simiSong:[],
				songComment:[],
				songLyric:[],
				lyrinIndex:0,
				//播放图标
				iconPlay:'iconpause',
				//播放是否旋转
				isPlayRotate:true,
				isLoading:false
			};
		},
		onLoad(option){
			this.getMusic(option.songId)
		},
		onUnload(){
			this.cancelLyricIndex()
			// #ifdef H5
			this.bgAudioMannager.destroy()
			// #endif
		},
		onHide(){
			this.cancelLyricIndex()
			// #ifdef H5
			this.bgAudioMannager.destroy()
			// #endif
		},
		methods:{
			getMusic(songId){
				
				this.$store.commit('NEXT_ID',songId)
				
				uni.showLoading({
					title:"数据加载中"
				})
				this.isLoading = true
				
				Promise.all([songDetail(songId),simiSong(songId),commentMusic(songId),lyric(songId),songUrl(songId)]).then((res)=>{
					//歌曲详情
					if(res[0].data.code == 200){
						this.songDetail = res[0].data.songs[0]
					}
					//相似歌曲
					if(res[1].data.code == 200){
						this.simiSong = res[1].data.songs
					}
					//歌曲评论
					if(res[2].data.code == 200){
						this.songComment = res[2].data.hotComments
					}
					//歌词处理
					if(res[3].data.code == 200){
						let lyric = res[3].data.lrc.lyric
						// //正则匹配
						let re = /\[([^\]]+)\]([^\[]+)/g
						var result = []
						lyric.replace(re,($0,$1,$2)=>{
							result.push({"time":this.formatTimeSec($1),"lyric":$2})
						})
						this.songLyric = result
						
					}
					//获取歌曲音频地址，并播放
					if(res[4].data.code == 200){
						
						//小程序音频播放,使用getBackgroundAudioManager API
						// #ifdef MP-WEIXIN
						this.bgAudioMannager = uni.getBackgroundAudioManager()
						this.bgAudioMannager.title = this.songDetail.name
						// #endif
						
						//h5播放
						// #ifdef H5
						
						if(!this.bgAudioMannager){
							this.bgAudioMannager = uni.createInnerAudioContext()
						}
						this.iconPlay = 'iconbofang1'
						this.isPlayRotate = false
						// #endif
						
						
						//获取音频播放对象
						this.bgAudioMannager.src = res[4].data.data[0].url || ''
						//监听歌词滚动
						this.listenLyrucIndex()
						//播放时回调方法
						this.bgAudioMannager.onPlay(()=>{
							this.iconPlay = 'iconpause'
							this.isPlayRotate = true
							//播发时监听歌词滚动
							this.listenLyrucIndex()
						})
						//暂停播放时回调方法
						this.bgAudioMannager.onPause(()=>{
							this.iconPlay = 'iconbofang1'
							this.isPlayRotate = false
							this.cancelLyricIndex()
						})
						
						//歌曲播放结束，播放下一首
						this.bgAudioMannager.onEnded(()=>{
							
							if(!this.$store.state.nextId){
								this.getMusic(songId)
							}else{
								this.getMusic(this.$store.state.nextId)
							}
						})
						
					}
					
					//隐藏加载状态
					this.isLoading = false
					uni.hideLoading()
					
				})
			
			},
			//歌词时间转化成秒
			formatTimeSec(value){
				//切割歌词时间
				var arr = value.split(":")
				return (Number(arr[0] * 60) + Number(arr[1])).toFixed(1)
			},
			//播发暂停按钮控制
			handleToPlay(){
				if(this.bgAudioMannager.paused){
					this.bgAudioMannager.play()
				}
				else{
					this.bgAudioMannager.pause()
				}
			},
			//歌词滚动监听定时器
			listenLyrucIndex(){
				//清理定时器
				clearInterval(this.timer)
				//设置定时器
				this.timer = setInterval(()=>{
					//循环获取歌词
					for(var i=0;i<this.songLyric.length;i++){
						//判断当前时间是否进入最后一个歌词,是则终止滚动
						if(this.bgAudioMannager.currentTime > this.songLyric[this.songLyric.length-1].time){
							this.lyrinIndex = this.songLyric.length -  1
							break
						}
						
						if(this.bgAudioMannager.currentTime > this.songLyric[i].time && this.bgAudioMannager.currentTime < this.songLyric[i+1].time){
							this.lyrinIndex = i
						}	
					}
					
				},300)
				
			},
			//取消歌词滚动监听定时器
			cancelLyricIndex(){
				clearInterval(this.timer)
			},
			//点击相似歌曲
			handleToSimi(songId){
				this.getMusic(songId)
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
@import url('../../common/iconfont.css');
//播放部分样式
.detail-play{
	width: 580rpx;
	height: 580rpx;
	background: url(~@/static/disc.png);
	background-size: cover;
	margin: 214rpx auto 0 auto;
	position: relative;
	
	image{
		width: 370rpx;
		height: 370rpx;
		border-radius: 50%;
		position: absolute;
		left: 0;
		top: 0;
		right:0;
		bottom: 0;
		margin:auto;
		
		//播放音乐图片旋转东湖
		animation:10s linear move infinite;
		//动画播放状态，默认暂停
		animation-play-state: paused;
		
	}
	
	//旋转动画运行
	.detail-play-run{
		animation-play-state: running;
	}
	@keyframes move{
			from{
				transform: rotate(0deg);
			}
			to{
				transform: rotate(360deg);
			}
	}
	
	text{
		width: 100rpx;
		height: 100rpx;
		font-size: 100rpx;
		color: white;
		position: absolute;
		left: 0;
		top: 0;
		right:0;
		bottom: 0;
		margin:auto;
	}
	view{
		width: 230rpx;
		height: 360rpx;
		background: url(~@/static/needle.png);
		background-size: cover;
		position: absolute;
		left: 100rpx;
		top:-200rpx;
		right: 0;
		margin: auto;
	}
}

//歌词部分样式
.detail-lyric{
	font-size: 32rpx;
	line-height: 82rpx;
	height: 246rpx;
	text-align: center;
	overflow: hidden;
	color: #6f6e73;
	.detail-lyric-wrap{
		//歌词滚动过度
		transition: .3s;
		.detail-lyric-item{
			height: 82rpx;
			&.active{
				color: white;
			}
		}
	}
}

//猜你也喜欢这首歌样式
.detail-like{
	margin:0 30rpx;
	.detail-like-head{
		font-size: 36rpx;
		color: white;
		margin: 50rpx 0;
	}
	.detail-like-item{
		display: flex;
		align-items: center;
		margin-bottom: 28rpx;
		.detail-like-img{
			width: 82rpx;
			height: 82rpx;
			border-radius: 20rpx;
			overflow: hidden;
			margin-right: 20rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.detail-like-song{
			flex: 1;
			color: #c6c2bf;
			view:nth-child(1){
				font-size: 28rpx;
				color: white;
				margin-bottom: 12rpx;
			}
			view:nth-child(2){
				font-size: 22rpx;
				image{
					width: 26rpx;
					height: 20rpx;
					margin-right: 10rpx;
				}
			}
		}
		text{
			font-size: 50rpx;
			color: #c6c2bf;
		}
	}
}

//评论样式
.detail-comment{
	margin:0 30rpx;
	.detail-comment-head{
		font-size: 36rpx;
		color: white;
		margin:50rpx 0;
	}
	.detail-comment-item{
		display: flex;
		margin-bottom: 28rpx;
		.detail-comment-img{
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 18rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.detail-comment-content{
			flex: 1;
			color: #cbcacf;
			.detail-comment-title{
				display: flex;
				justify-content: space-between;
				.detail-comment-name{
					view:nth-child(1){
						font-size: 26rpx;
					}
					view:nth-child(2){
						font-size: 28rpx;
					}
				}
				.detail-comment-likes{
					font-size: 28rpx;
					text{
						margin-left: 10rpx;
					}
				}
			}
			.detail-comment-text{
				font-size: 28rpx;
				line-height: 40rpx;
				color: white;
				margin-top: 20rpx;
				border-bottom: 1px solid #59595b;
				padding-bottom: 40rpx;
			}
		}
	}
}

</style>
